<!-- components/Notification.vue -->
<template>
    <div class="notification" :class="`notification-${type}`" 
         @click="closeNotification">
      <div class="notification-title">{{ title }}</div>
      <div class="notification-message">{{ message }}</div>
      <div class="notification-time">{{ formatTime(timestamp) }}</div>
    </div>
  </template>
  
  <script>
  export default {
    props: {
      id: { type: Number, required: true },
      title: { type: String, default: '通知' },
      message: { type: String, required: true },
      type: { type: String, default: 'info' },
      timestamp: { type: Date, default: () => new Date() }
    },
    methods: {
      closeNotification() {
        this.$store.commit('chat/CLEAR_NOTIFICATION', this.id);
      },
      formatTime(date) {
        return date.toLocaleTimeString().slice(0, 5);
      }
    }
  };
  </script>
  
  <style scoped>
  .notification {
    position: fixed;
    top: 20px;
    right: 20px;
    width: 300px;
    padding: 15px;
    border-radius: 4px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
    z-index: 1000;
    transition: all 0.3s;
    cursor: pointer;
  }
  .notification-info {
    background-color: #e6f7ff;
    border-left: 4px solid #1890ff;
  }
  .notification-success {
    background-color: #f6ffed;
    border-left: 4px solid #52c41a;
  }
  .notification-warning {
    background-color: #fffbe6;
    border-left: 4px solid #faad14;
  }
  .notification-title {
    font-weight: bold;
    margin-bottom: 5px;
  }
  .notification-time {
    font-size: 12px;
    color: #999;
    margin-top: 5px;
  }
  </style>